<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="top-header">
      <view class="logo">
        <text>❤️</text>
        <text>志愿者</text>
      </view>
      <view class="top-search">
        <view class="top-search-box" @tap="handleSearch">
          <text class="top-search-icon">🔍</text>
          <text class="top-search-placeholder">搜索一下</text>
        </view>
      </view>
      <view class="top-right">
        <button v-if="!state.isLogin" class="login-btn" @tap="handleLogin">请登录</button>
        <view class="user-avatar" @tap="state.isLogin ? handleUserCenter() : handleLogin()">👤</view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in state.tabs"
        :key="index"
        :class="['tab-item', { active: state.currentTab === index }]"
        @tap="handleTabChange(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 横幅区域 -->
    <view class="banner-area">
      <swiper
        class="banner-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :circular="true"
        indicator-color="rgba(255,255,255,0.6)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(banner, index) in state.banners" :key="index">
          <image :src="banner" mode="aspectFill" class="banner-image" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 通知播报区域 -->
    <view class="notice-broadcast">
      <text class="broadcast-icon">📢</text>
      <view class="broadcast-content">
        <view class="broadcast-text">{{ state.noticeText }}</view>
      </view>
    </view>

    <!-- 白色内容区域 -->
    <view class="white-content">
      <!-- 功能网格 -->
      <view class="function-grid">
        <view
          v-for="(item, index) in state.functions"
          :key="index"
          class="function-item"
          @tap="handleFunctionClick(item)"
        >
          <view :class="['function-icon', item.colorClass]">
            <text>{{ item.icon }}</text>
          </view>
          <view class="function-name">{{ item.name }}</view>
        </view>
      </view>

      <!-- 志愿服务区域 -->
      <view class="service-section">
        <view class="service-header">
          <text class="service-icon">🤝</text>
          <text class="service-title">志愿服务</text>
        </view>
        <view class="service-cards">
          <view
            v-for="(service, index) in state.services"
            :key="index"
            class="service-card"
            @tap="handleServiceClick(service)"
          >
            <image :src="service.image" mode="aspectFill" class="service-card-bg" />
            <view class="service-card-title">{{ service.title }}</view>
          </view>
        </view>
      </view>

      <!-- 大图展示区域 -->
      <view class="big-image-section">
        <view class="big-image-container" @tap="handleBigImageClick">
          <image :src="state.bigImage" mode="aspectFill" class="big-image" />
        </view>
      </view>

      <!-- 活动招募区域 -->
      <view class="activity-recruit-section">
        <view class="recruit-header">
          <view class="recruit-title">
            <text class="recruit-icon">📋</text>
            <text class="recruit-title-text">活动招募</text>
          </view>
          <text class="recruit-more" @tap="handleMoreRecruits">更多 ></text>
        </view>
        <view class="card-row">
          <view
            v-for="(card, index) in state.activityCards"
            :key="index"
            :class="['activity-card', card.colorClass]"
            @tap="handleActivityCardClick(card)"
          >
            <view class="card-title">{{ card.title }}</view>
            <view v-if="card.subtitle" class="card-subtitle">{{ card.subtitle }}</view>
            <view class="card-action">{{ card.action }}</view>
            <view class="card-icon">{{ card.icon }}</view>
          </view>
        </view>
      </view>

      <!-- 最近活动部分 -->
      <view class="section-title">
        <text>最近活动</text>
        <text class="section-more" @tap="handleMoreActivities">更多 ></text>
      </view>

      <view
        v-for="(activity, index) in state.recentActivities"
        :key="index"
        class="activity-list-item"
        @tap="handleActivityClick(activity)"
      >
        <view class="activity-tag">{{ activity.tag }}</view>
        <view class="activity-image-container">
          <image :src="activity.image" mode="aspectFill" class="activity-image" />
        </view>
        <view class="activity-details">
          <view class="activity-main-title">{{ activity.title }}</view>
          <view class="activity-org">{{ activity.org }}</view>
          <view class="activity-info">
            <text>🕐 {{ activity.time }}</text>
            <button class="signup-btn" @tap.stop="handleSignup(activity)">{{ activity.btnText }}</button>
          </view>
        </view>
      </view>

      <!-- 群众活动风采部分 -->
      <view class="section-title">
        <text>群众活动风采</text>
        <text class="section-more" @tap="handleMoreCommunity">更多 ></text>
      </view>

      <view class="community-section">
        <view
          v-for="(item, index) in state.communityItems"
          :key="index"
          class="community-item"
          @tap="handleCommunityClick(item)"
        >
          <view class="community-header">
            <view :class="['community-avatar', item.avatarStyle]">{{ item.avatar }}</view>
            <view class="community-user-info">
              <view class="community-username">{{ item.username }}</view>
              <view class="community-time">{{ item.time }}</view>
            </view>
          </view>
          <view class="community-title">{{ item.title }}</view>
          <view class="community-content">{{ item.content }}</view>
          <image v-if="item.image" :src="item.image" mode="aspectFill" class="community-image" />
          <view class="community-stats">
            <view class="community-stat">
              <text>👍</text>
              <text>{{ item.likes }}</text>
            </view>
            <view class="community-stat">
              <text>💬</text>
              <text>{{ item.comments }}</text>
            </view>
            <view class="community-stat">
              <text>👁</text>
              <text>{{ item.views }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 社区活动资源库部分 -->
      <view class="section-title">
        <text>社区活动资源库</text>
        <text class="section-more" @tap="handleMoreSuggestions">更多 ></text>
      </view>

      <view class="suggestion-section">
        <view
          v-for="(item, index) in state.suggestionItems"
          :key="index"
          class="suggestion-item"
          @tap="handleSuggestionClick(item)"
        >
          <view class="suggestion-header">
            <view class="suggestion-icon">{{ item.icon }}</view>
            <view class="suggestion-info">
              <view class="suggestion-author">{{ item.author }}</view>
              <view class="suggestion-time">{{ item.time }}</view>
            </view>
            <text class="suggestion-tag">{{ item.tag }}</text>
          </view>
          <view class="suggestion-title">{{ item.title }}</view>
          <view class="suggestion-content">{{ item.content }}</view>
          <view v-if="item.attachments" class="suggestion-attachments">
            <view
              v-for="(attach, aIndex) in item.attachments"
              :key="aIndex"
              :class="['attachment-icon', attach.type]"
              @tap.stop="viewAttachment(attach)"
            >
              <text>{{ attach.icon }}</text>
              <text>{{ attach.name }}</text>
            </view>
          </view>
          <view class="suggestion-actions">
            <view class="suggestion-action">
              <text>👍</text>
              <text>{{ item.likes }}</text>
            </view>
            <view class="suggestion-action">
              <text>💬</text>
              <text>{{ item.comments }}</text>
            </view>
            <view class="suggestion-action">
              <text>{{ item.statusIcon }}</text>
              <text>{{ item.status }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 志愿大数据区域 -->
      <view class="data-stats-section">
        <view class="stats-header">
          <view class="stats-title">
            <text class="stats-icon">📊</text>
            <text class="stats-title-text">站站融通大数据</text>
          </view>
          <view class="stats-update-time">更新时间：每天0点0分</view>
        </view>
        <view class="stats-grid">
          <view v-for="(stat, index) in state.statistics" :key="index" class="stats-item">
            <view class="stats-number">{{ stat.value }}</view>
            <view class="stats-label">{{ stat.label }}</view>
          </view>
        </view>
      </view>

      <!-- 志愿精神横幅 -->
      <view class="volunteer-spirit-section">
        <view class="spirit-banner">
          <view class="spirit-title">志愿精神</view>
          <view class="spirit-values">
            <view class="spirit-value">奉献</view>
            <view class="spirit-value">友爱</view>
            <view class="spirit-value">互助</view>
            <view class="spirit-value">进步</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view :class="['nav-item', { active: state.currentNav === 0 }]" @tap="handleNavClick(0)">
        <text class="nav-icon">🏠</text>
        <text>首页</text>
      </view>
      <view class="nav-item" @tap="handleNavClick(1)">
        <text class="center-btn">👆</text>
        <text>签到</text>
      </view>
      <view :class="['nav-item', { active: state.currentNav === 2 }]" @tap="handleNavClick(2)">
        <text class="nav-icon">👤</text>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  isLogin: false,
  currentTab: 0,
  currentNav: 0,
  tabs: ['首页', '实践阵地', '志愿数据', '政策文件'],
  noticeText:
    '【最新通知】欢迎参加志愿服务活动！ 北海市贝雕博物馆开放日活动报名中，名额有限，先到先得！ 平安街社区民族团结主题活动即将开始...',
  banners: [
    '/static/img/习大大鼓励志愿者.png',
    '/static/img/习近平对社会工作作出重要指示.png',
    '/static/img/学习贯彻第二十届三中全会精神.png',
    '/static/img/bg.jpg'
  ],
  functions: [
    { name: '用户注册', icon: '👤', colorClass: 'green', path: '/pages/cmt/join-practice' },
    { name: '加入团队', icon: '👥', colorClass: 'orange', path: '/pages/cmt/join-team' },
    { name: '团队入驻', icon: '❤️', colorClass: '', path: '/pages/cmt/team-register' },
    { name: '文明积分', icon: '👑', colorClass: '', path: '/pages/cmt/ranking' },
    { name: '阵地预约', icon: '⭐', colorClass: 'yellow', path: '/pages/cmt/venues' },
    { name: '云上课堂', icon: '🎓', colorClass: 'teal', path: '/pages/cmt/courses' },
    { name: '实践活动', icon: '🏃', colorClass: 'blue', path: '/pages/cmt/activities' }
  ],
  services: [
    { title: '幸福黄石港', image: '/static/img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png' },
    { title: '主流西塞', image: '/static/img/87ce05ef-cd7e-4d75-8bff-a44995bfca6a.png' },
    { title: '省善下陆', image: '/static/img/a3673c98-7a12-4e07-939d-6112c640e728.png' },
    { title: '魅力铁山', image: '/static/img/bg.jpg' }
  ],
  bigImage: '/static/img/贝雕博物馆.jpg',
  activityCards: [
    {
      title: '加入文明实践',
      subtitle: '师资库',
      action: '立即申请',
      icon: '👩‍🏫',
      colorClass: 'blue',
      path: '/pages/cmt/join-practice'
    },
    {
      title: '实践团队入驻',
      subtitle: '',
      action: '立即入驻',
      icon: '🚩',
      colorClass: 'orange',
      path: '/pages/cmt/team-register'
    }
  ],
  recentActivities: [
    {
      tag: '活动预告',
      image: '/static/img/贝雕博物馆.jpg',
      title: '活动预告！北海市贝雕博物馆开放日来了，每月限量开放→速约!（第一期）',
      org: '北海市贝雕博物馆',
      time: '2025-11-15~2025-11-15',
      btnText: '立即预约'
    },
    {
      tag: '民族团结',
      image: '/static/img/石榴结籽.jpg',
      title: '【站站融通•文明365】石榴结籽粽连心，邻里融乐一家亲——2025年平安街社区民族团结主题活动',
      org: '平安街社区新时代文明实践站',
      time: '2025-11-10~2025-11-10',
      btnText: '报名参与'
    },
    {
      tag: '敬老服务',
      image: '/static/img/老龄化教育.jpg',
      title: '西藏路社区开展"知老・护老・敬老"老龄化教育暨中医惠老活动',
      org: '西藏路社区新时代文明实践站',
      time: '2025-11-08~2025-11-08',
      btnText: '了解详情'
    }
  ],
  communityItems: [
    {
      avatar: '张',
      avatarStyle: '',
      username: '张明',
      time: '2小时前',
      title: '关于社区环境整治的建议',
      content:
        '最近发现小区绿化带有些杂草丛生，建议增加维护频次。另外垃圾分类宣传还需要加强，很多居民对分类标准还不够清楚...',
      image: '/static/img/853b4aea-acb0-4bcf-b26b-ca285bdafe91.png',
      likes: 12,
      comments: 8,
      views: 45
    },
    {
      avatar: '李',
      avatarStyle: 'green',
      username: '李华',
      time: '4小时前',
      title: '社区活动建议：邻里互助活动',
      content:
        '提议组织一次邻里互助活动，让大家互相认识，增进感情。可以包括技能分享、物品交换等内容。大家觉得怎么样？',
      image: '',
      likes: 25,
      comments: 15,
      views: 68
    }
  ],
  suggestionItems: [
    {
      icon: '💡',
      author: '王老师',
      time: '1小时前',
      tag: '热门建议',
      title: '社区文化节活动方案',
      content:
        '建议举办一场为期三天的社区文化节，包括传统文化展示、手工艺制作体验、社区才艺表演等环节。可以邀请社区老人分享传统技艺，增进不同年龄段居民的交流...',
      attachments: [
        { type: 'doc', icon: '📄', name: '活动策划书.docx' },
        { type: 'pdf', icon: '📋', name: '预算清单.pdf' },
        { type: 'image', icon: '🖼️', name: '效果图.jpg' }
      ],
      likes: 32,
      comments: 18,
      statusIcon: '📋',
      status: '已采纳'
    },
    {
      icon: '🌱',
      author: '绿色志愿者小组',
      time: '3小时前',
      tag: '环保主题',
      title: '社区绿化美化行动',
      content:
        '提议组织"美丽家园共建"活动，包括垃圾分类宣传、绿植种植、环保知识讲座等。让居民参与到社区环境改善中来，培养环保意识...',
      attachments: [
        { type: 'doc', icon: '📄', name: '实施方案.docx' },
        { type: 'image', icon: '🖼️', name: '绿化设计图.png' }
      ],
      likes: 28,
      comments: 12,
      statusIcon: '⏰',
      status: '待审核'
    }
  ],
  statistics: [
    { label: '注册志愿者人数', value: '220190' },
    { label: '志愿服务活动开展数', value: '71883' },
    { label: '今日新增志愿者数', value: '24' },
    { label: '志愿组织注册数', value: '1630' },
    { label: '组织累计志愿服务时长', value: '3574557' },
    { label: '今日新增活动数', value: '117' }
  ]
})

// 处理函数
const handleSearch = () => {
  sheep.$router.go('/pages/index/search')
}

const handleLogin = () => {
  sheep.$router.go('/pages/login/login')
}

const handleUserCenter = () => {
  sheep.$router.go('/pages/user/user')
}

const handleTabChange = (index) => {
  state.currentTab = index
  const paths = ['', '/pages/cmt/venues', '/pages/cmt/ranking', '/pages/cmt/policy']
  if (paths[index]) {
    sheep.$router.go(paths[index])
  }
}

const handleFunctionClick = (item) => {
  console.log('跳转到:', item.path)
  uni.navigateTo({
    url: item.path
  })
}

const handleServiceClick = (service) => {
  sheep.$router.go('/pages/cmt/services')
}

const handleBigImageClick = () => {
  sheep.$router.go('/pages/cmt/quality-schools')
}

const handleMoreRecruits = () => {
  sheep.$router.go('/pages/cmt/activities')
}

const handleActivityCardClick = (card) => {
  sheep.$router.go(card.path)
}

const handleMoreActivities = () => {
  sheep.$router.go('/pages/cmt/activities')
}

const handleActivityClick = (activity) => {
  sheep.$router.go('/pages/cmt/activity-detail')
}

const handleSignup = (activity) => {
  uni.showToast({ title: '报名功能开发中', icon: 'none' })
}

const handleMoreCommunity = () => {
  sheep.$router.go('/pages/cmt/community')
}

const handleCommunityClick = (item) => {
  sheep.$router.go('/pages/cmt/community-detail')
}

const handleMoreSuggestions = () => {
  sheep.$router.go('/pages/cmt/suggestions')
}

const handleSuggestionClick = (item) => {
  sheep.$router.go('/pages/cmt/suggestion-detail')
}

const viewAttachment = (attach) => {
  uni.showToast({ title: '附件查看功能开发中', icon: 'none' })
}

const handleNavClick = (index) => {
  state.currentNav = index
  if (index === 0) {
    // 首页，刷新
    uni.reLaunch({ url: '/pages/index/index' })
  } else if (index === 1) {
    // 签到
    sheep.$router.go('/pages/cmt/checkin')
  } else if (index === 2) {
    // 我的
    sheep.$router.go('/pages/user/user')
  }
}
</script>

<style lang="scss" scoped>
/* 页面容器 */
.page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.top-header {
  background: linear-gradient(to right, #ec3432 0%, #fa7e3a 100%);
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  min-height: 112rpx;
}

.logo {
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.top-search {
  flex: 1;
  max-width: 440rpx;
  margin: 0 40rpx;
}

.top-search-box {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 44rpx;
  padding: 16rpx 32rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.top-search-icon {
  color: #999;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.top-search-placeholder {
  color: #999;
  font-size: 26rpx;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.login-btn {
  background: none;
  border: none;
  color: white;
  font-size: 28rpx;
  padding: 0;
  font-weight: 500;
}

.user-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 44rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

/* 标签栏 */
.tab-bar {
  background: #fff2e3;
  display: flex;
  justify-content: space-around;
  padding: 14rpx 0;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.06);
}

.tab-item {
  color: #666;
  font-size: 30rpx;
  position: relative;
  padding-bottom: 12rpx;
  font-weight: 500;
}

.tab-item.active {
  color: #c62828;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background: linear-gradient(to right, #c62828 0%, #e53935 100%);
  border-radius: 4rpx;
}

/* 横幅区域 */
.banner-area {
  position: relative;
  overflow: hidden;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.banner-swiper {
  width: 100%;
  height: 410rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

/* 通知播报区域 */
.notice-broadcast {
  background: #fff1e0;
  margin: 0 40rpx 24rpx 40rpx;
  padding: 10rpx 30rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.25);
  overflow: hidden;
}

.broadcast-icon {
  color: #f57c00;
  font-size: 40rpx;
  flex-shrink: 0;
}

.broadcast-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 40rpx;
  display: flex;
  align-items: center;
}

.broadcast-text {
  color: #e65100;
  font-size: 26rpx;
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 白色内容区域 */
.white-content {
  background: #f5f5f5;
  padding-top: 10rpx;
  padding-bottom: 140rpx;
}

/* 功能网格 */
.function-grid {
  background: white;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx 30rpx;
  padding: 40rpx 30rpx;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-icon {
  width: 104rpx;
  height: 104rpx;
  border-radius: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52rpx;
  margin-bottom: 16rpx;
  background: linear-gradient(to right, #d32f2f 0%, #e53935 50%, #ef5350 100%);
  box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.3);
}

.function-icon.green {
  background: linear-gradient(to right, #388e3c 0%, #4caf50 50%, #66bb6a 100%);
  box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.3);
}

.function-icon.blue {
  background: linear-gradient(to right, #1976d2 0%, #2196f3 50%, #42a5f5 100%);
  box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.3);
}

.function-icon.orange {
  background: linear-gradient(to right, #f57c00 0%, #ff9800 50%, #ffa726 100%);
  box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.3);
}

.function-icon.purple {
  background: linear-gradient(to right, #7b1fa2 0%, #9c27b0 50%, #ba68c8 100%);
  box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.3);
}

.function-icon.teal {
  background: linear-gradient(to right, #00796b 0%, #009688 50%, #26a69a 100%);
  box-shadow: 0 6rpx 20rpx rgba(0, 121, 107, 0.3);
}

.function-icon.yellow {
  background: linear-gradient(to right, #f9a825 0%, #ffc107 50%, #ffd54f 100%);
  box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.3);
}

.function-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  text-align: center;
}

/* 志愿服务区域 */
.service-section {
  background: white;
  padding: 30rpx;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.service-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 30rpx;
}

.service-icon {
  font-size: 40rpx;
}

.service-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.service-card {
  position: relative;
  height: 200rpx;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.service-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.service-card-title {
  position: relative;
  z-index: 2;
  font-size: 30rpx;
  font-weight: bold;
  color: white;
  text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.5);
}

/* 大图展示区域 */
.big-image-section {
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  height: 160rpx;
}

.big-image-container {
  position: relative;
  width: 100%;
  height: 160rpx;
  overflow: hidden;
  display: block;
}

.big-image {
  width: 100%;
  height: 160rpx;
  display: block;
}

/* 活动招募区域 */
.activity-recruit-section {
  background: white;
  padding: 30rpx;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.recruit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.recruit-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.recruit-icon {
  font-size: 40rpx;
}

.recruit-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.recruit-more {
  font-size: 28rpx;
  color: #999;
}

.card-row {
  display: flex;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.activity-card {
  flex: 1;
  position: relative;
  border-radius: 24rpx;
  padding: 40rpx;
  overflow: hidden;
  min-height: 200rpx;
}

.activity-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 150%;
  height: 150%;
  opacity: 0.1;
  transform: rotate(45deg);
}

.activity-card.blue {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.activity-card.blue::before {
  background: radial-gradient(circle, #2196f3 0%, transparent 70%);
}

.activity-card.orange {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.activity-card.orange::before {
  background: radial-gradient(circle, #ff9800 0%, transparent 70%);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  color: #333;
  position: relative;
  z-index: 2;
}

.card-subtitle {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 2;
}

.card-action {
  font-size: 24rpx;
  color: #4a9eff;
  position: relative;
  z-index: 2;
}

.card-icon {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  font-size: 60rpx;
  opacity: 0.8;
  z-index: 1;
}

/* 推荐活动标题 */
.section-title {
  padding: 0 40rpx;
  margin: 40rpx 40rpx 30rpx 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-more {
  font-size: 24rpx;
  color: #999;
  font-weight: normal;
}

/* 活动列表项 */
.activity-list-item {
  background: white;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  position: relative;
}

.activity-image-container {
  width: 100%;
  height: 360rpx;
  overflow: hidden;
  position: relative;
}

.activity-image {
  width: 100%;
  height: 100%;
}

.activity-tag {
  position: absolute;
  top: 20rpx;
  right: -40rpx;
  background: linear-gradient(to right, #c62828 0%, #e53935 100%);
  color: white;
  padding: 8rpx 50rpx;
  font-size: 22rpx;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.activity-details {
  padding: 30rpx;
}

.activity-main-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.activity-org {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.activity-info {
  font-size: 24rpx;
  color: #999;
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-wrap: wrap;
}

.signup-btn {
  background: linear-gradient(to right, #d32f2f 0%, #e53935 50%, #ef5350 100%);
  color: white;
  border: none;
  padding: 16rpx 40rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  margin-left: auto;
  box-shadow: 0 4rpx 12rpx rgba(211, 47, 47, 0.35);
  line-height: 1;

  &::after {
    border: none;
  }
}

/* 社区讨论样式 */
.community-section {
  margin-bottom: 40rpx;
}

.community-item {
  background: white;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  position: relative;
}

.community-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.community-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #4a9eff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.community-avatar.green {
  background: #4caf50;
}

.community-user-info {
  flex: 1;
}

.community-username {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.community-time {
  font-size: 22rpx;
  color: #999;
}

.community-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.community-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.community-image {
  width: 100%;
  max-height: 300rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.community-stats {
  display: flex;
  align-items: center;
  gap: 30rpx;
  font-size: 22rpx;
  color: #999;
}

.community-stat {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

/* 活动方案建议样式 */
.suggestion-section {
  margin-bottom: 40rpx;
}

.suggestion-item {
  background: white;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  position: relative;
  border-left: 8rpx solid transparent;
  border-image: linear-gradient(to bottom, #c62828 0%, #e53935 100%) 1;
}

.suggestion-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.suggestion-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(to right, #b71c1c 0%, #c62828 50%, #e53935 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(198, 40, 40, 0.3);
}

.suggestion-info {
  flex: 1;
}

.suggestion-author {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.suggestion-time {
  font-size: 22rpx;
  color: #999;
}

.suggestion-tag {
  background: linear-gradient(to right, #c62828 0%, #e53935 100%);
  color: white;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 6rpx rgba(198, 40, 40, 0.3);
}

.suggestion-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.suggestion-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.suggestion-attachments {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.attachment-icon {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 22rpx;
  color: #666;
  background: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.attachment-icon.doc {
  color: #1976d2;
  background: #e3f2fd;
}

.attachment-icon.image {
  color: #388e3c;
  background: #e8f5e8;
}

.attachment-icon.pdf {
  color: #d32f2f;
  background: #ffebee;
}

.suggestion-actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
  font-size: 22rpx;
  color: #999;
}

.suggestion-action {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

/* 志愿大数据区域 */
.data-stats-section {
  background: white;
  padding: 30rpx;
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stats-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.stats-icon {
  font-size: 32rpx;
}

.stats-title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.stats-update-time {
  font-size: 22rpx;
  color: #999;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx 20rpx;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #e53935;
  margin-bottom: 10rpx;
  line-height: 1.2;
}

.stats-label {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
}

/* 志愿精神横幅 */
.volunteer-spirit-section {
  margin: 0 40rpx 30rpx 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.spirit-banner {
  background: linear-gradient(to right, #ff6b35 0%, #ff8e53 50%, #ff9a66 100%);
  padding: 60rpx 40rpx;
  position: relative;
  overflow: hidden;
}

.spirit-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20rpx,
    rgba(255, 255, 255, 0.05) 20rpx,
    rgba(255, 255, 255, 0.05) 40rpx
  );
}

.spirit-title {
  font-size: 44rpx;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 40rpx;
  position: relative;
  text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.spirit-values {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.spirit-value {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  text-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
}

/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
  font-size: 24rpx;
  flex: 1;
}

.nav-item.active {
  color: #e53935;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

/* 中央签到按钮 */
.center-btn {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(to right, #c62828 0%, #e53935 50%, #ef5350 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  box-shadow: 0 8rpx 30rpx rgba(198, 40, 40, 0.45);
  margin-top: -30rpx;
  margin-bottom: 8rpx;
  border: 6rpx solid white;
}
</style>
